<h1 mat-dialog-title>Edit project</h1>

<div class="modal-form-container">
    <mat-tab-group>
        <mat-tab label="General">
            <form [formGroup]="formGroup">
                <mat-form-field class="form-field">
                    <input matInput formControlName="projectName" placeholder="Project name" type="text">
                </mat-form-field>
            
                <mat-form-field class="form-field">
                    <input matInput formControlName="width" placeholder="Scene width (px)" type="number">
                </mat-form-field>
            
                <mat-form-field class="form-field">
                    <input matInput formControlName="height" placeholder="Scene height (px)" type="number">
                </mat-form-field>
            
                <mat-form-field class="form-field">
                    <input matInput formControlName="nodeGridSize" placeholder="Node grid size" type="number">
                </mat-form-field>
            
                <mat-form-field class="form-field">
                    <input matInput formControlName="drawingGridSize" placeholder="Drawing grid size" type="number">
                </mat-form-field>
            </form>
            
            <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="project.auto_open">
                Open this project in the background when GNS3 server starts
            </mat-checkbox>
            
            <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="project.auto_start">
                Start all nodes when this project is opened
            </mat-checkbox>
            
            <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="!project.auto_close">
                Leave this project running in the background after closing
            </mat-checkbox>
            
            <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="project.show_interface_labels">
                Show interface labels at start
            </mat-checkbox>
        </mat-tab>
        <mat-tab label="Global variables">
            <form [formGroup]="variableFormGroup">
                <mat-form-field class="form-field">
                    <input matInput formControlName="name" placeholder="Name" type="text">
                </mat-form-field>
            
                <mat-form-field class="form-field">
                    <input matInput formControlName="value" placeholder="Value" type="text">
                </mat-form-field>
            </form>
            <button class="form-field" mat-button (click)="addVariable()" mat-raised-button color="primary">Add variable</button>
            <table class="table" mat-table [dataSource]="variables">
                <ng-container matColumnDef="name">
                    <th mat-header-cell *matHeaderCellDef>Name</th>
                    <td mat-cell *matCellDef="let element">{{element.name}} </td>
                </ng-container>
            
                <ng-container matColumnDef="value">
                    <th mat-header-cell *matHeaderCellDef>Value</th>
                    <td mat-cell *matCellDef="let element">{{element.value}}</td>
                </ng-container>
            
                <ng-container matColumnDef="actions">
                    <th mat-header-cell *matHeaderCellDef>Actions</th>
                    <td mat-cell *matCellDef="let element">
                        <button mat-icon-button matTooltip="Delete variable" (click)="deleteVariable(element)">
                            <mat-icon aria-label="Delete adapter">delete</mat-icon>
                        </button>
                    </td>
                </ng-container>
                
                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </table>
        </mat-tab>
    </mat-tab-group>
</div>

<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()" color="accent">Cancel</button>
  <button mat-button (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
</div>
